import React,{useEffect} from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card,Button,Form,message,Select,InputNumber, Input} from 'antd';
import { connect,history } from 'umi';
import db from '@/utils/localstorage';
import { updateClassTableInfo } from '../service';
const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 5,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 18,
      },
      md: {
        span: 15,
      },
    },
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 5,
      },
    },
  };
const EditPrivateSchedule = props =>{
    const { dispatch,coachList,shopList,siteList,courseList,match,classTableInfo } = props;
    const [form] = Form.useForm();
    useEffect(() => {
      if (dispatch) {
        dispatch({
          type: 'cubePrivateEdit/fetchCoach',
          payload: {
            empType:2,
          },
        })
        dispatch({
          type: 'cubePrivateEdit/selectAllCourse',
          payload: {
            classType:'3'
          },
        })
        dispatch({
          type: 'cubePrivateEdit/fetchShopList',
          payload:{
            userId:db.get("user").userId
          }
        })
        dispatch({
          type: 'cubePrivateEdit/queryClassTableInfoById',
          payload: {
            classId:match.params.id
          },
        }).then((result)=>{
          dispatch({
            type: 'cubePrivateEdit/querySiteInfoListByVenueIdNotPage',
            payload:{
              id:result.venueId
            }
          }).then(()=>{
            form.resetFields();
          })
        })
       }
     }, []);

     const onFinish = async (values) => {
      const hide = message.loading('正在保存'); 
      if(values.isStartUpClass){
        values.isStartUpClass=0;
      }else{
        values.isStartUpClass=1;
      }
      try {
        await updateClassTableInfo({
          id: match.params.id,
          ...values
        });
        hide();
        message.success('保存成功，即将跳转');
        history.push(`/lesson/private`);
        return true;
      } catch (error) {
        hide();
        message.error('成功失败，请重试');
        return false;
      }
     }
    return <PageHeaderWrapper>
        <Card title="课时信息">
        <Form
              style={{
                marginTop: 8,
              }}
              form={form}
              name="basic"
              initialValues={{
                venueId:classTableInfo.venueId,
                courseId:classTableInfo.courseId,
                bookingNum:classTableInfo.bookingNum||0,
                siteId:classTableInfo.siteId,
                coachId:classTableInfo.coachId,
                maximumAttendance:classTableInfo.maximumAttendance||0,
                minimumNumberClasses:classTableInfo.minimumNumberClasses||0,
                date:classTableInfo.date,
                timePeriod:classTableInfo.timePeriod
              }}
              onFinish={onFinish}
            >
               <Form.Item
               {...formItemLayout}
                label="场馆"
                name="venueId"
              >
                <Select style={{ width: '100%' }} placeholder="请选择" disablabed>
                    {
                        shopList&&shopList.map((item,index)=> <Select.Option value={item.id} key={index}>{item.name}</Select.Option>)
                    }
                </Select>
              </Form.Item>
              <Form.Item
               {...formItemLayout}
                label="课程"
                name="courseId"
              >
                <Select style={{ width: '100%' }} placeholder="请选择" disabled>
                {
                  courseList&&courseList.map((item,index)=><Select.Option value={item.id} key={index}>{item.courseName}</Select.Option>)
                }
                </Select>
              </Form.Item>
              <Form.Item
              {...formItemLayout}
                label="教练"
                name="coachId"
              >
                <Select style={{ width: '100%' }} placeholder="请选择" >
                  {
                    coachList&&coachList.map((item,index)=><Select.Option value={item.userId} key={index}>{item.name}</Select.Option>)
                  }
                </Select>
              </Form.Item>
              <Form.Item
              {...formItemLayout}
                label="日期"
                name="date"
              >
                <Input disabled/>
              </Form.Item>
              <Form.Item
              {...formItemLayout}
                label="时间"
                name="timePeriod"
              >
                <Input disabled/>
              </Form.Item>
              <Form.Item
              {...formItemLayout}
                label="已约人数"
                name="bookingNum"
              >
                <InputNumber min={0}  style={{width:'100%'}} disabled/>
              </Form.Item>
              <Form.Item
              {...formItemLayout}
                label="最少开课人数"
                name="minimumNumberClasses"
              >
                <InputNumber min={0} style={{width:'100%'}}/>
              </Form.Item>
              <Form.Item
                  {...submitFormLayout}
                  style={{
                    marginTop: 32,
                  }}
                >
                  <Button type="primary" htmlType="submit">
                  提交
                  </Button>
                  <Button
                    style={{
                      marginLeft: 8,
                    }}
                    onClick={()=>window.history.back()}
                  >
                    返回
                  </Button>
                </Form.Item>
            </Form>
        </Card>
    </PageHeaderWrapper>
}

export default connect(({ loading,cubePrivateEdit }) => ({
    coachList: cubePrivateEdit.coachList,
    shopList: cubePrivateEdit.shopList,
    siteList: cubePrivateEdit.siteList,
    courseList: cubePrivateEdit.courseList,
    classTableInfo:cubePrivateEdit.classTableInfo
  }))(EditPrivateSchedule);